<template>
    <div>
        <el-row>
            <el-col :span="12" :offset="6">
                <el-row style="min-height: 290px">
                    <el-table :data="pageData"
                              :header-cell-style="this.$store.state.headerCssObj"
                              :cell-style="this.$store.state.cellCssObj"
                              border>
                        <el-table-column
                                prop="workDay"
                                label="排班日期">

                        </el-table-column>
                        <el-table-column
                                prop="timeSlot"
                                label="排班类型">

                        </el-table-column>
                    </el-table>

                </el-row>
                <el-row style="margin-top: 20px;text-align: center">
                    <paging :obj="pagingData"></paging>

                </el-row>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "checkWorkArrange",
        computed: {
            pagingData() {
                var that = this;
                return {
                    pageSize: 5,//一页展示几条数据
                    pagerCount: 5,//超过多少页打点省略
                    currentChange(num) {        //改变当前页
                        that.currentPage = num
                    },
                    total: this.tableData.length,//一共有几条数据
                }
            },
            tableData(){
                 return this.pageDataExchange(this.$store.state.workPageStore.workArrangeData)
            },
            pageData(){
               return this.tableData.slice((this.currentPage-1)*5,this.currentPage*5)
            },
        },
        data() {
            return {

                currentPage: 1,
            }
        },

        created(){
            this.checkWorkArrange();
        },
        methods: {
            ...mapActions([ 'checkWorkArrangeAct']),
            getNowTime() {
                let date = new Date();
                // console.log(date);
                let yy = date.getFullYear();
                let mm = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                let dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                let hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
                let mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                let time = yy + '-' + mm + '-' + dd + '  ' + hh + ':' + mf + ':' + ss;
                return {time, date}
            },
            /*分页查询排班信息*/
            checkWorkArrange() {
                let obj = {
                    staffId: this.$store.state.user.userId
                    // staffId:1
                }
                // console.log(obj);
                this.checkWorkArrangeAct(obj)
            },
            /* 时段数据转换*/
            pageDataExchange(data) {
                let arr = []
                for (let item of data) {
                    if (item.timeSlot === 0) {
                        item.timeSlot = '08:00-14:00'
                    } else if (item.timeSlot === 1) {
                        item.timeSlot = '14:00-22:00'
                    }
                    arr.push(item)
                }
                return arr
            },

        },
    }

</script>

<style scoped>

</style>